<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-10-08 14:02:01
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-10-14 14:55:32
 * @FilePath: \vue-project\src\views\System\Role.vue
 * @Description: 
 * 
-->
<template>
  <div>
    <a-card>
      <a-space direction="vertical" fill>
        <a-row>
          <a-col>
            <a-button type="primary" @click="handleClick('add')">添加</a-button>
          </a-col>
        </a-row>
        <!-- 列表 -->
        <a-table :columns="columns" :data="data">
          <template #status="{ record }">
            {{ record.status == 1 ? '正常' : '禁用' }}
          </template>
          <template #handle="{ record }">
            <a-space>
              <a-link :disabled="record.id == 1" @click="allotPower(record)">分配权限</a-link>
              <a-link>编辑</a-link>
              <a-link :disabled="record.id == 1">删除</a-link>
            </a-space>
          </template>
        </a-table>
      </a-space>
    </a-card>
    <!-- 添加编辑抽屉 -->
    <HandleForm
      ref="handleFormRef"
      :drawerInfo="drawerInfo"
      :formFields="formFields"
      :formConfig="formConfig"
      :rules="rules"
      @closeDrawer="drawerInfo.visible = false"
      @submitDrawer="submit"
    />
    <!-- 分配权限 -->
    <AllotPower :currentInfo="currentInfo" ref="powerRef" />
  </div>
</template>

<script setup>
import { getRoles, saveRoles } from '@/api/system.js'
import { reactive, ref } from 'vue'
import HandleForm from '@/components/HandleForm.vue'
import AllotPower from './components/AllotPower.vue'
import { Message } from '@arco-design/web-vue'
const columns = [
  {
    title: '角色名称',
    dataIndex: 'name'
  },
  {
    title: '角色描述',
    dataIndex: 'desc'
  },
  {
    title: '角色状态',
    slotName: 'status'
  },
  {
    title: '操作',
    slotName: 'handle'
  }
]
const baseUrl = import.meta.env.VITE_APP_FILE_PREVIEW_URL
const data = ref([])
const currentId = ref('')
const handleFormRef = ref(null)
const powerRef = ref(null)
const currentInfo = ref({})

//添加编辑抽屉相关配置
const drawerInfo = ref({
  width: 800,
  visible: false,
  title: '添加角色'
})
//表单字段相关配置
const formFields = ref([
  {
    type: 'input',
    prop: 'name',
    label: '角色名称',
    placeholder: '请输入角色名称',
    isShow: true,
    defaultValue: ''
  },
  {
    type: 'textarea',
    prop: 'desc',
    label: '角色描述',
    placeholder: '请输入角色描述',
    isShow: true,
    defaultValue: ''
  },
  {
    type: 'switch',
    prop: 'status',
    label: '是否启用',
    placeholder: '',
    active: 1,
    unActive: 0,
    isShow: true,
    defaultValue: 1
  }
])

//form相关配置
const formConfig = reactive({
  width: '100%'
})
//校验规则相关配置
const rules = reactive({})
//获取轮播图列表
const getList = async () => {
  let res = await getRoles()
  if (res.code == 200) {
    data.value = res.data.list
  }
}
getList()

//相关函数操作
const handleClick = (type) => {
  if (type == 'add') {
    drawerInfo.value.title = '添加角色'
  }
  drawerInfo.value.visible = true
}

//提交
const submit = async (formObj) => {
  let res = await saveRoles(formObj, currentId.value)
  if (res.code == 200) {
    Message.success('添加成功')
    getList()
    drawerInfo.value.visible = false
    handleFormRef.value.handleReset()
  }
}

//点击分配权限
const allotPower = (item) => {
  console.log(item)
  currentInfo.value = item
  powerRef.value.openDrawer()
}
</script>

<style lang="scss" scoped>
.banner_img {
  height: 80px;
  width: auto;
  img {
    height: 100%;
  }
}
</style>